<template>
	<view class="login">
		<view class="nologin" v-if="token">
			<view class="u-demo-block__content">
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="6">
						<view class="demo-layout bg-purple-light">购物车</view>
					</u-col>
					<u-col span="6">
						<view class="demo-layout bg-purple" @click="wmx">编辑</view>
					</u-col>
				</u-row>
				<u-checkbox-group class="check" placement="column" v-model="selectArr" @change="selectedChange">
					<u-row justify="space-between" customStyle="margin-bottom: 10px" v-for="item in cartList"
						:key="item.key" @click="fn(item.id)">
						<u-col span="2">
							<view class="demo-layout bg-purpleo">
								<u-checkbox shape="circle" activeColor="green" :name="item.key"></u-checkbox>
							</view>
						</u-col>
						<u-col span="5">
							<view class="demo-layout bg-purple-lightp">
								<u--image :showLoading="true" :src="item.pic" width="80px" height="100px"
									@click="click">
								</u--image>
							</view>
						</u-col>
						<u-col span="5">
							<view class="demo-layout bg-purple-dark">
								<text>{{item.name}}</text>
								<text>￥{{item.price}}</text>
								<u-number-box v-model="item.number" @change="valChange"></u-number-box>
							</view>
						</u-col>
					</u-row>
				</u-checkbox-group>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="2">
						<view class="demo-layout bg-purpleq">
							<u-checkbox-group class="check">
								<u-checkbox shape="circle" activeColor="green" label="全选" :checked="allCheck"
									@change="changeAll"></u-checkbox>
							</u-checkbox-group>
						</view>
					</u-col>
					<u-col span="5">
						<view class="demo-layout bg-purple-lighta">
							<u--text text="合计:"></u--text>
							<u--text mode="price" :text="jine"></u--text>
						</view>
					</u-col>
					<u-col span="5">
						<view class="container">
							<u-modal :show="show" @confirm="closeModal" @cancel="closeModal" showCancelButton>
								<view class="slot-content">
									<rich-text :nodes="content"></rich-text>
								</view>
							</u-modal>

							<view v-if="flag">
								<view class="demo-layout bg-purple-darkz">
									<u-button type="primary" shape="circle" color="#1ba784" :text="'去结算('+geshu+')'"></u-button>
								</view>
							</view>
							<view v-else>
								<u-button @click="show = true">删除</u-button>
								<!-- 按钮变换代码 -->
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="islogin" v-else>
			<img class="logo" src="/static/cart.8a1bb599.png">
			<view class="text-area">
				<text class="title">{{title}}</text>
			</view>
			<button class="mini-btn" type="primary" size="mini" shape="circle" @click="fn">去登录</button>
		</view>
	</view>
</template>

<script>
	import {
		_cart
	} from "../../api/cart.js"
	export default {
		data() {
			return {
				value: 0,
				flag: true,
				title: "登录后才能看到您的购物车",
				src: 'https://dcdn.it120.cc/2019/07/23/3140ac2f-7311-475d-840b-d4dd2ec59a54.jpg',
				cartList: [],
				token: "",
				show: false,
				allCheck: false,
				content: '确定要清空购物车吗？',
				selectArr: [],
				geshu:0,
				jine:0
			}
		},

		methods: {

			getCartList() {
				_cart().then(res => {
					// console.log(res, 1111)
					if (res.code === 0) {
						this.cartList = res.data.items
						console.log(this.cartList);
					}
				})
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			fn() {
				uni.navigateTo({
					url: "../login/login"
				})
			},
			closeModal() {
				// 需要做也写业务需求
				// TODO
				this.show = false

			},
			wmx() {
				if (this.flag) {
					this.flag = false
				} else {
					this.flag = true
				}
			},
			ischeck() {
				// console.log(123)
				// if (this.allCheck == true) {
				// 	this.allCheck = false;
				// } else {
				// 	this.allCheck = true;
				// }
			},
			selectedChange(val) {
				this.allCheck = this.cartList.every(item=>val.includes(item.key))
			},
			changeAll(val) {
				if (val) {
					this.selectArr = this.cartList.map(item => item.key)
					this.zongji()
				} else {
					this.selectArr = []
					this.geshu = 0
					this.jine =0
				}
				console.log(this.selectArr);
			},
			zongji(){
				console.log(123)
				this.geshu = 0,
				this.jine = 0 ,
				this.cartList.forEach(item=>{
					this.geshu += item.number
					console.log(this.geshu)
					this.jine += item.number*item.price
				})
			}

		},



		onShow() {
			this.token = uni.getStorageSync("token")
		},
		onReady() {
			this.getCartList()
			this.zongji()
		}

	}
</script>

<style lang="scss" scoped>
	.login {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 26rpx;
		color: black;
		margin-bottom: 30rpx;
	}

	.wrap {
		padding: 12px;
	}

	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}

	.bg-purple {
		background: #fff;
		width: 100%;
		height: 50px;
		line-height: 50px;
		font-size: 20rpx;
		text-align: right;
		color: #38f;

	}

	.bg-purpleo {
		background: #fff;
		width: 100%;
		height: 211px;

	}

	.bg-purpleq {
		background: #fff;
		width: 100%;
		height: 99px;
		text-align: center;


	}

	.bg-purple-light {
		background: #fff;

		width: 100%;
		height: 50px;
		line-height: 50px;
		font-size: 20rpx;
		margin-right: 0;
	}

	.bg-purple-lightp {
		background: #fff;

		width: 100%;
		height: 211px;

	}

	.bg-purple-lighta {
		background: #fff;

		width: 100%;
		height: 99px;
	}

	.bg-purple-dark {
		background: #fff;

		width: 100%;
		height: 400rpx;


		margin-right: 0;
	}

	.bg-purple-darkz {
		background: #fff;

		width: 100%;
		height: 99px;


		margin-right: 0;
	}

	.nologin {
		width: 750rpx;
		height: 100%;

	}
</style>
